<template>
    <div class="result_wrapper">
        <Header :componentInfoHeader="componentInfoHeader" />
        <CenterControl pageType="result" 
            @resultFile="initFiles" 
            :hideHeader="hideHeader" 
            :resultType="showType * 1"/>

        <MarkContent ref="MarkContent" :files="files" 
        :base="base" pageType="result"/>
    </div>
</template>
<script>
import $ from 'jquery'
import Header from "@/components/mark/Header";
import CenterControl from "@/components/mark/centerControl";
import MarkContent from "@/components/mark/MarkContent"
let self = null
export default {
    name: "ResultPage",
    data() {
        return {
            base: {
                batchId: "",
                taskId: "",
                markTaskId: "",
                recheck: null,
                step: 0
            },
            componentInfoHeader: {
                curName: "", // 文件名
                standardBtnShow: true, // 标注规范显示
                standardCnt: "", // 标注规范内容
                abandonBtnShow: false, // 重新认证按钮显示
                repulseBtnShow: false, // 打回按钮显示
                isRecheck: false, // 是否是复检环节
                saveBtnShow: false, // 保存按钮显示
                historyBtnShow: false, // 历史按钮显示
                shortcutBtnShow: true, //  快捷键展示
                submitBtnShow: false,
                closeBtnShow: true,
                shortcutkeys: [
                    {
                        key: "多边形",
                        value: "Z"
                    },
                    {
                        key: "矩形",
                        value: "A"
                    },
                    {
                        key: "快捷隐藏标记框",
                        value: "Tab"
                    },
                    {
                        key: "取消绘图",
                        value: "Esc"
                    },
                    {
                        key: "快速编辑",
                        value: "双击图形 / 选中 + Enter"
                    },
                    {
                        key: "拖拽图片",
                        value: "Space + 左键"
                    },
                    {
                        key: "撤销多边形绘制点",
                        value: "ctrl + Z"
                    },
                    {
                        key: "删除",
                        value: "右键"
                    }
                ], // 快捷键配置
                showVersionInfo: false // 展示历史按钮
            },
            showType: 0,    
            files: {
                // 文件信息
                lastIndex: 0, // 上次标注的文件id
                allInfo: [], // 全部数据
                showType: 0, // 0 标注数据 1 检查数据，2 质检数据
                showList: [],
                current: null, // 当前的数据
                curIndex: 0, // 当前数据的id
                allImage: [] // 全部的图片
            }, // 文件相关
            history: {
                show: false, //历史界面显示
                list: [], //历史文件列表
                allList: [],
                curIndex: 0,
                showVersionInfo: false, //历史显然界面显示
                textData: "", // 历史规整内容字符串
                correlationHTML: "", //历史联动内容字符串
                unfoldDomH: {},
                curFiles: null //当前选中历史记录的文件对象
            },
            arrowShow: false,
            listShow: false,
            lastType: "click", // 上次选择的绘图类型
            checkboxsGroup: {
                serial: false,
                inHeritAttr: false
            },
            filterBoxShow: false, //筛选框显示
            interactive: {
                currentFinished: false // 当前图片是否加载完毕
            }, // 交互相关
            showMark: false,
            showCheck: false,
            showTest: false,
            modifyTipsShow: false, // 修改率浮层
            allResult: {},
        };
    },
    components: {
        Header,
        CenterControl,
        MarkContent
    },
    async created() {
        self = this;
        //获取taskId
        this.base.taskId = this.Utils.getQueryStringArgs()["taskId"];
        this.base.markTaskId = this.Utils.getQueryStringArgs()["markTaskId"];
        this.base.fileId = this.Utils.getQueryStringArgs()["fileid"];
        var params = {
            taskId: this.base.taskId,
            markTaskId: this.base.markTaskId,
            fileId: this.base.fileId
        };
        // return;
        let resultInfoPromise = await self.ass_api.getResultBySDK(params);
        resultInfoPromise.then(res => {
            if (!res) return;
            var step = res.step;
            if (!(step == 0 || step == 1 || step == 2)) {
                self.ass_api.error("页面类型异常");
                return;
            }
            self.allResult = res.result;
            self.base.markStandard = res.markStandard ? res.markStandard : "--";
            self.base.markName = res.fileName ? res.fileName : " -- ";

            if (step == 0) {
                $("title").text("精细化OCR结果");
            } else if (step == 1) {
                $("title").text("精细化OCR结果");
            } else if (step == 2) {
                $("title").text("精细化OCR结果");
            }

            if (step * 1 >= res.result.length) {
                step = res.result.length - 1;
            }
            step = res.result[step].step; // 针对没有检查环节 result返回length长度为2 step = 1 => 但没有检查环节
            self.initFiles(step);
        });

        // 快捷键
        this.shortcutKeyEvent();
    },
    mounted: function() {
    },
    computed: {
    },
    methods: {
        /**
         * 数据初始化
         * @param files
         * @param lastIndex
         */
        initFiles(step) {
            // 遍历循环全部数据
            var self = this;
            var indexId = "";
            this.allResult.forEach(function(item) {
                if (item.step == step) {
                    indexId = item.markTaskFileId;
                }
            });

            var files = this.allResult;
            var len = files.length;
            this.showType = step;
            self.files.allInfo = [];

            for (var i = 0; i < len; i++) {
                if (files[i].step == 0) {
                    self.showMark = true;
                } else if (files[i].step == 1) {
                    self.showCheck = true;
                } else if (files[i].step == 2) {
                    self.showTest = true;
                }

                if (step == files[i].step) {
                    // console.log('step',step)
                    var item = files[i],
                        dInfo = {};
                    try {
                        // 标注默认结果
                        dInfo = JSON.parse(item.finalResult.resultText);
                    } catch (e) {
                        dInfo = [];
                    }
                    // console.log('initFiles1233',dInfo);
                    if (self.Utils.isNotNull(item)) {

                        self.files.allInfo.push({
                            result: this.flatToTreeData(dInfo), // 把扁平数据树结构化 供前端逻辑使用
                            isBad: item.finalResult.extend.stamp,
                            name: item.name,
                            id: indexId,
                            status: item.status,
                            isInit: 0, // 表示尚未从结果服务获取数据
                            saveSuccess: true
                        });
                    }
                }
            }

            self.selectData(step); // 选择数据
        },
        /**
         *  选择区域数据
         * @param _type
         * @param lastIndex
         */
        selectData: function(step) {
            // 选择对应的数据

            if (!self.interactive.currentFinished && step != step) {
                // 切换需要做限制
                self.ui.fade("当前图片尚未加载完毕");
                return false;
            }

            self.files.showType = step;
            var showList = [];

            // if (_type === 1) { // 全部数据
            showList = self.files.allInfo;
            // }

            // var len2 = showList.length;
            // for (var i = 0; i < len2; i++) {
            //     var file = showList[i];
            //     file.last = i == 0 ? null : showList[i - 1];
            //     file.next = i == len - 1 ? null : showList[i + 1];
            // }

            self.files.showList = showList; // 给当前列表赋值
            self.selectFile(self.files.showList[0]);

            // console.log('showList',self.files.showList);
        },
        /**
         * 选择单个文件
         * @param item 当前条的数据
         */
        selectFile: function(item) {
            if (self.Utils.isNull(item)) return false; // 如果空 返回
            self.files.curIndex = item.id;
            // // 这里先赋值 数据
            this.$set(self.files, "current", item);
            // // console.log(item)
            self.initFile(item);
        },
        /**
         * 初始化单个文件
         * @param item
         */
        initFile: function(item) {
            // 判断是否获取最新结果 并初当前加载参数
            this.$refs.MarkContent.$emit('initFile', item) // 通知子组件 重置组件
        },
        hideHeader(showType) {
            this.arrowShow = showType;
        },
        /**
         * 图片预加载
         * @param img 图片地址
         */
        preLoading: function(img) {
            if (!img) {
                return false;
            }
            var oImg = new Image(),
                url = "";
            oImg.src = img;
            if (oImg.complete) {
                url = self.files.allImage.shift();
                //如果图片已经存在于浏览器缓存,直接调用回调函数
                self.preLoading(url);
            } else {
                oImg.onload = function() {
                    // console.log('加载了一次');
                    url = self.files.allImage.shift();
                    //如果图片已经存在于浏览器缓存,直接调用回调函数
                    self.preLoading(url);
                };
            }
        },
        // 初始化后套返回扁平数据转换树状结构
        flatToTreeData: function(lists) {
            var tempMap = {};
            for (let i = 0, len = lists.length; i < len; i++) {
                let item = lists[i];
                item.parent = null;
                item.children = [];
                tempMap[item.id] = item;
            }
            var newArr = [];
            for (let i = 0, len = lists.length; i < len; i++) {
                let item = lists[i];
                if (item.pId != -1 && item.pId) {
                    var parent = tempMap[item.pId];
                    parent.children.push(item);
                } else {
                    newArr.push(item);
                }
            }

            return newArr;
        },
        // 数据转换  新增  isFirst 是否是第一层层
        dataConversion: function(list, isDraw, isFirst) {
            // console.log(list,999999999);
            var data = [],
                numId = "";
            // console.log('图片回到成功！')
            var type = Object.prototype.toString.call(list);
            if (type === "[object Array]") {
                for (var i = 0; i < list.length; i++) {
                    var region = list[i].region; // 图形类型
                    let id = list[i].id; // 当前图形的id
                    var pId = list[i].pId; // 当前图形的pId
                    if (region === "rect") {
                        list[i].id =
                            typeof id === "number"
                                ? "r-" + id
                                : id.indexOf("r-") === -1 ? "r-" + id : id; // 取最大的数
                    } else if (region === "area") {
                        list[i].id =
                            typeof id === "number"
                                ? "p-" + id
                                : id.indexOf("p-") === -1 ? "p-" + id : id; // 取最大的数
                        list[i].points = this.polygonToNeed(list[i].points); // 多边形 point s 转换
                    } else if (region === "polyline") {
                        list[i].id =
                            typeof id === "number"
                                ? "pl-" + id
                                : id.indexOf("pl-") === -1 ? "pl-" + id : id; // 取最大的数
                        list[i].points = this.polygonToNeed(list[i].points); // 多边形 point s 转换
                        list[i].pId =
                            typeof pId === "number"
                                ? "p-" + pId
                                : pId.indexOf("p-") === -1 ? "p-" + pId : pId; // 取最大的数
                    }

                    if (typeof id !== "number") {
                        // id 不是数字的是否
                        numId = id.match(/\d+/g);
                        if (numId) {
                            // 存在数字
                            id = Number(numId[0]);
                            if (isNaN(id)) {
                                id = i;
                            }
                        } else {
                            // 不存在数字
                            id = i;
                        }
                    }

                    if (id > self.vm.maxId) {
                        self.vm.maxId = id;
                    }

                    if (isFirst) {
                        data.push(list[i]);
                    }

                    if (list[i].children && list[i].children.length > 0) {
                        self.dataConversion(list[i].children, isDraw, false);
                    }
                }
                // console.log(self.vm.maxId + 1 ,self.vm.maxId , 1 );
                this.vm.currentId = Number(self.vm.maxId + 1); // 赋值最大的id
            } else {
                for (var j in list) {
                    // 只是用来计算最大的id
                    let id = list[j].id; // 获取当前的id
                    if (typeof id !== "number") {
                        // id 不是数字的是否
                        numId = id.match(/\d+/g);
                        if (numId) {
                            // 存在数字
                            id = Number(numId[0]);
                            if (isNaN(id)) {
                                id = i;
                            }
                        } else {
                            // 不存在数字
                            id = i;
                        }
                    }

                    if (id > self.vm.maxId) {
                        self.vm.maxId = id;
                    }
                }
                this.vm.currentId = Number(self.vm.maxId + 1); // 赋值最大的id
                data = list;
            }
            // console.log(data)
            this.vm.list = data; // 整体赋值
            // console.log(this.vm.list);
            this.synchToFile(); // 同步 current 和 list
            if (isDraw) {
                this.drawByList(this.vm.list); // 绘制图形
            } else {
                return data;
            }
        },
        polygonToNeed: function(points) {
            var pointsData = [];
            var type = typeof points;

            if (type === "object") {
                for (var i = 0, len = points.length; i < len; i++) {
                    pointsData.push(points[i]);
                }
            } else if (type === "string") {
                points
                    .replace(/\(|\)/g, "")
                    .replace(/ /g, ";")
                    .split(";")
                    .filter(function(item) {
                        // console.log(item);
                        if (item.indexOf(",") > 0) {
                            var num = item.split(",");
                            for (var i = 0; i < num.length; i++) {
                                num[i] = Number(num[i]);
                            }
                            pointsData.push(num);
                        }
                    });
            }
            return pointsData;
        },
        // 获取某个文件
        getFile: function(_fileIndex) {
            if (_fileIndex === undefined) {
                return self.files.current;
            }
            var len = self.files.showList.length;
            for (var i = 0; i < len; i++) {
                var item = self.files.showList[i];
                if (item.index == _fileIndex) {
                    self.selectFile(item);
                    return item;
                }
            }
            return null;
        },
    },
    filters: {
        formatTime: function(val) {
            // return parseFloat(val + '').toFixed(2)
            if (!val) return "00:00";
            var zNum = val < 1 ? Math.ceil(val) : parseInt(val);
            return (
                parseInt(zNum / 60) +
                ":" +
                (parseInt(zNum % 60) < 10
                    ? "0" + parseInt(zNum % 60)
                    : parseInt(zNum % 60))
            );
        },
        takeTwoDecimal: function(val) {
            var type = typeof val;
            if (type !== "number") {
                return "100%";
            }
            return (val * 100).toFixed(2) + "%";
        }
    }
};
</script>